<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3684728_ouke2t4xw8d.css" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/normalize.min.css" />
    <script>
      window.__unocss = {
        rules: [
          ['x-0', { left: 0, top: 0 }],
          ['bg-gradient-1', { background: 'linear-gradient(45deg, #e91e63, #e91e63 50%, #ffc170, #ffc170 50%)' }],
          [
            'bg-gradient-2',
            { background: 'linear-gradient(160deg, #03a9f4, #03a9f4 50%, transparent, transparent 50%)' },
          ],
          ['li-bg-color', { backgroundColor: ' rgba(0, 0, 0, 0.1)' }],
          [
            'li-shadow',
            {
              'box-shadow': '0 0 10px 10px #bfa',
            },
          ],
        ],
        shortcuts: {
          'body-style': ['content-none', 'absolute', 'x-0', 'w-full', 'h-full', '-z-10'],
          'li-style': [
            'relative',
            'w-100px',
            'h-100px',
            'text-white',
            'li-bg-color',
            'rounded-1/2',
            'grid',
            'place-content-center',
            'backdrop-blur-10px',
            'z-0',
          ],
          'li-before': ['body-style', 'bg-#bfa', 'rounded-1/2', 'scale-0', 'duration-300', 'ease-in'],
          'li-hover-before': ['content-none', 'scale-90', 'li-shadow'],
          'i-style': ['duration-500', 'text-16!'],
        },
      }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/uno.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime/attributify.global.js"></script>

    <link rel="stylesheet" href="./style.css" />
    <title>09_创建 Css 图标悬停效果</title>
  </head>
  <body
    class="box-border select-none grid place-content-center h-screen"
    before="body-style bg-gradient-1 "
    after="body-style bg-gradient-2 -top-10px"
  >
    <ul class="grid grid-flow-col gap-16px">
      <li class="li-style" before="li-before" hover:before="li-hover-before">
        <i class="iconfont icon-aixin i-style"></i>
      </li>
      <li class="li-style" before="li-before" hover:before="li-hover-before">
        <i class="iconfont icon-Dyanjing i-style"></i>
      </li>
      <li class="li-style" before="li-before" hover:before="li-hover-before">
        <i class="iconfont icon-anquan i-style"></i>
      </li>
      <li class="li-style" before="li-before" hover:before="li-hover-before">
        <i class="iconfont icon-ceshi i-style"></i>
      </li>
    </ul>
  </body>
</html>
